<template>
  <div>
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <el-input  placeholder="请输入内容"><el-button  slot="append" icon='el-icon-search'></el-button></el-input>
         </el-col>
         <el-col :span="4">
          <el-button type="primary" @click="addBox = true">添加商品</el-button>
         </el-col>
      </el-row>

       <el-table :data="goodsList" border stripe>
            <el-table-column prop='goods_id' label="序号"></el-table-column>
            <el-table-column prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column prop="goods_price" label="商品价格"></el-table-column>
            <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
            <el-table-column prop="add_time" label="创建时间">
               <template slot-scope="scope">
                 {{ formatDateTime(scope.row.add_time) }}
               </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button size="mini" type="primary" icon='el-icon-edit'  @click="updateList(scope.row.goods_id)"></el-button>

                 <el-button size="mini" type="danger" icon='el-icon-delete' @click="getGoodsDel(scope.row.goods_id)"></el-button>

                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
    </el-card>

    <!-- 添加商品弹出框 -->
    <el-dialog title="商品添加" :visible.sync="addBox">
      <el-form :model="addForm">
      <el-form-item   prop="goods_name">
        <label for="">商品名称</label>
        <el-input  v-model="addForm.goods_name" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_cat">
        <label for="">商品分类</label>
        <el-input  v-model="addForm.goods_cat" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_price">
        <label for="">商品价格</label>
        <el-input  v-model="addForm.goods_price" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_number">
        <label for="">商品数量</label>
        <el-input  v-model="addForm.goods_number" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_weight">
        <label for="">商品重量</label>
        <el-input  v-model="addForm.goods_weight" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_introduce">
        <label for="">商品介绍</label>
        <el-input  v-model="addForm.goods_introduce" ></el-input>
      </el-form-item>
      </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="addBox=false">取 消</el-button>
          <el-button type="primary" @click="getGoodsAdd">确 定</el-button>
       </div>
    </el-dialog>

     <!-- 修改商品弹出框 -->
    <el-dialog title="修改商品" :visible.sync="updateBox">
      <el-form :model="updateForm">
      <el-form-item   prop="goods_name">
        <label for="">商品名称</label>
        <el-input  v-model="updateForm.goods_name" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_price">
        <label for="">商品价格</label>
        <el-input  v-model="updateForm.goods_price" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_number">
        <label for="">商品数量</label>
        <el-input  v-model="updateForm.goods_number" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_weight">
        <label for="">商品重量</label>
        <el-input  v-model="updateForm.goods_weight" ></el-input>
      </el-form-item>
      <el-form-item   prop="goods_introduce">
        <label for="">商品介绍</label>
        <el-input  v-model="updateForm.goods_introduce" ></el-input>
      </el-form-item>
      </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="updateBox=false">取 消</el-button>
          <el-button type="primary" @click="getGoodsUptade">确 定</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
export default {
data(){
    return{
      goodsList:[],//用户列表
      total:0,
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:5
      },
      addBox:false,
      updateBox:false,
      addForm:{
        goods_name:'',
        goods_cat:'',
        goods_price:'',
        goods_number:'',
        goods_weight:'',
        goods_introduce:''
      },
      updateForm:{}
    }
  },
  created(){
    this.getGoodList()//ajax 获取用户数据
  },
  methods:{
    // 查询
   async getGoodList(){
    let ret=await this.$http.get('goods',({params:this.queryInfo}));
    this.goodsList=ret.data.goods;
    this.total=ret.data.total;
    console.log(ret);
   },
   //添加
    async getGoodsAdd(){
      let ret =await this.$http.post('goods',this.addForm);
      console.log(ret);
      //成功失败提示
      this.boxMsg(ret.meta.status,201,ret.meta.msg);
      this.addBox = false; // 修改此行
      this.getGoodList()//刷新
   },
  //  查询要修改的数据
   async updateList(id){
    this.updateBox=true;
    let ret =await this.$http.get(`goods/${id}`);
    this.updateForm=ret.data;
   },
  //  修改
   async getGoodsUptade(){
    let ok=await this.$confirm('你确定要修改吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了修改')
        }
    let ret =await this.$http.put(`goods/${this.updateForm.goods_id}`,this.updateForm);
    console.log(ret);
    //成功失败提示
      this.boxMsg(ret.meta.status,200,ret.meta.msg);
    this.updateBox=false;
    this.getGoodList()//刷新
   },
  //  删除
   async getGoodsDel(id){
    let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
    let ret =await this.$http.delete(`goods/${id}`);
    //成功失败提示
      this.boxMsg(ret.meta.status,200,ret.meta.msg);
    this.getGoodList()//刷新
   },
   handleSizeChange(size){
      // console.log('变化每页条数',size);
      this.queryInfo.pagesize=size
      this.getGoodList()//刷新
    },
    handleCurrentChange(p){
      // console.log('变化页码',p);
      this.queryInfo.pagenum=p;
      this.getGoodList()//刷新
    },
    formatDateTime(timestamp) {
    return moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
  },
  //成功失败提示
    boxMsg(a,b,msg){
      if(a !=b){
        return this.$message.error(msg);
      }
      // 成功提示
      this.$message({
           message: msg,
          type: 'success'
        });
    }
}
}
</script>

<style>

</style>